<template>
	<view>
		<cu-custom @tap-right="ToTapRight" bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">cewei-demo</block>
			<block slot="right">新增</block>
		</cu-custom>

		<view class="cu-bar search bg-white">
			<view class="action">
				<text class="lg text-gray cuIcon-scan"></text>
			</view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @input="toSearch" :adjust-position="false" type="text" placeholder="" confirm-type="search"></input>
			</view>
			<view class="action">
				<text>广州</text>
				<text class="cuIcon-triangledownfill"></text>
			</view>
		</view>

		<!-- 列表 -->
		<view class="cu-list menu-avatar comment" v-if="aList.length>0">

			<view class="cu-item solids-top" v-for="item in aList" :key="item._id">
				<view class="cu-avatar round" :style="{backgroundImage:`url(${item.imgList[0]})`}"></view>

				<view class="content">
					<view class="">{{item.name}}</view>
					<view class="bg-white">
						<view class="grid text-gray col-2">
							<view class="">
								<text>年龄：</text>
								<text>{{item.year}}岁</text>
							</view>
							<view class="">
								<text>身高：</text>
								<text>{{item.height}}cm</text>
							</view>
							<view class="">
								<text>是否Vip：</text>
								<text>{{item.isMember ? '是':'否'}}</text>
							</view>
							<view class="">
								<text>等级：</text>
								<text>{{pickerGrades[item.grades]}}</text>
							</view>
						</view>
					</view>
					<view class="text-gray text-content text-df flex flex-wrap">
						<text>班级：</text>
						<text class="fr">{{picker[item.classes]}}</text>
					</view>
					<view class="text-gray text-content text-df flex flex-wrap">
						<text>生日：</text>
						<text class="fr">{{item.birthday}}</text>
					</view>
					<view class="text-gray text-content text-df flex flex-wrap">
						<text>爱好：</text>
						<text class="fr">{{dealHobby(item.hobby)}}</text>
					</view>
					<view class="text-gray text-content text-df flex flex-wrap">
						<text>学生描述：</text>
						<text class="fr">{{item.describe}}</text>
					</view>

					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df">{{item.createTime | dateform}}</view>
						<view>
							<text @tap="toDelete" :data-id="item._id" class="cuIcon-deletefill text-red">删除</text>
							<text @tap="toUpdate" :data-id="item._id" class="cuIcon-edit margin-left-sm">更新</text>
						</view>
					</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	const {
		request,
		dateFormat
	} = require('@/utils/request.js');
	export default {
		data() {
			return {
				aList: [],
				picker: [
					'一年一班',
					'一年二班',
				],
				pickerGrades: [
					'合格',
					'不合格',
				],
			}
		},
		computed: {
			dealHobby: function(arr) {
				return (arr) => {
					if (Array.isArray(arr) && arr.length > 0) {
						return arr.filter(item => item.checked).map(second => second.value).join('、')
					} else {
						return ''
					}
				}
			}
		},
		methods: {
			// 新增
			ToTapRight() {
				uni.navigateTo({
					url: '/pages/reg/reg?type=add'
				})
			},
			// 搜索
			toSearch(e) {
				// console.log(e.detail.value)
				request({
					url: "/users/getMsg",
					method: 'POST',
					data: {
						name: e.detail.value
					}
				}).then(res => {
					this.aList = res.data;
				})
			},
			// 删除
			toDelete(e) {
				request({
					url: "/users/deleteMsgById",
					method: 'POST',
					data: {
						id: e.currentTarget.dataset.id
					}
				}).then(res => {
					this.aList = res.data;
				})
			},
			// 更新
			toUpdate(e) {
				uni.navigateTo({
					url: `/pages/reg/reg?type=update&id=${e.currentTarget.dataset.id}`
				})
			}
		},
		onShow() {
			request({
				url: "/users/getMsg",
				method: 'POST'
			}).then(res => {
				this.aList = res.data;
			})
		}
	}
</script>

<style>

</style>
